$('#userForm').on('submit', function () {
    var formData = $(this).serialize();
    $.ajax({
        type: 'post',
        url: '/users',
        data: formData,
        success: function () {
            location.reload()
        },
        error: function () {
            alert('添加用户失败')
        }
    })
    return false
});
$('#modifyBox').on('change', '#avatar', function () {
    var formData = new FormData();
    formData.append('avatar', this.files[0]);
    $.ajax({
        type: 'post',
        url: '/upload',
        data: formData,
        //告诉$.ajax不要解析请求参数
        processData: false,
        //告诉$.ajax方法不要设置请求参数的类型
        contentType: false,
        success: function (response) {
            $('#preview').attr('src', response[0].avatar);
            $('#hiddenAvatar').val(response[0].avatar);
        }
    })
});
$.ajax({
    type: 'get',
    url: '/users',
    success: function (response) {
        var html = template('userTpl', { data: response });
        $('#userTbody').html(html);
    }
});
$('#userTbody').on('click', '.edit', function (response) {
    var id = $(this).attr('data-id');
    $.ajax({
        type: 'get',
        url: '/users/' + id,
        success: function (response) {
            var html = template('modifyTpl', response);
            $('#modifyBox').html(html)
        }
    })
});
$('#modifyBox').on('submit', '#modifyForm', function () {
    var formData = $(this).serialize();
    var id = $(this).attr('data-id');
    $.ajax({
        type: 'put',
        url: '/users/' + id,
        data: formData,
        success: function () {
            location.reload()
        }
    })
    return false
});
$('#userTbody').on('click', '.delete', function (response) {
    var id = $(this).siblings().attr('data-id');
    if (confirm('您确认删除吗？')) {
        $.ajax({
            type: 'delete',
            url: '/users/' + id,
            success: function (response) {
                location.reload()
            }
        })
    }
});
$('#selectAll').on('change', function () {
    var status = $(this).prop('checked');
    $('.select').prop('checked', status);
    if (status) {
        $('#deleteMany').show();
    } else {
        $('#deleteMany').hide();
    }
});
$('#userTbody').on('change', '.select', function () {
    var inputs = $('#userTbody').find('input');
    if (inputs.length == inputs.filter(':checked').length) {
        $('#selectAll').prop('checked', true);
    } else {
        $('#selectAll').prop('checked', false);
    };
    if (inputs.filter(':checked').length > 0) {
        $('#deleteMany').show();
    } else {
        $('#deleteMany').hide();
    }
});
$('#deleteMany').on('click', function () {
    var ids = [];
    var checkedUser = $('#userTbody').find('input').filter(':checked');
    checkedUser.each(function (index, element) {
        ids.push($(element).attr('data-id'));
        if (confirm('您确定要批量删除吗？')) {
            $.ajax({
                type: 'delete',
                url: '/users/' + ids.join('-'),
                success: function () {
                    location.reload();
                }
            })
        }
    })
})